<!-- 搜索组件 -->
<template>
  <div id="">
    <!-- 静态显示 -->
    <div class="showSearch" @click="toSearchFriend">
      <img src="@/assets/friendImage/serach_icon4.png" alt="" width="15"> 搜索
    </div>
    <!-- <div class="searchBox" v-else>
      <img src="@/assets/friendImage/serach_icon4.png" alt="" width="15" @click="searchEvent">
      <input ref="ipt" type="text" name="" v-model="searchKey" @keyup.enter="searchEvent">
    </div> -->
  </div>
</template>
<script>
export default {
  name: "",
  data: () => ({
    searchKey:'',
    isShow:false,
  }),
  methods: {
//     showSearch() {
//       this.isShow = true;
//       this.$nextTick(function () {
//          this.$refs.ipt.focus()
//       })
//     },
//     searchEvent(event) {
//       this.$emit('searchEvent',this.searchKey);
//     },
    toSearchFriend() {
      this.$emit('toSearchFriend',this.searchKey);
    },
  },
}
</script>
<style lang="scss" scoped>
.showSearch{
  color: $lightColor;
  background: white;
  border-radius: 4px;
  height: 40px; line-height: 40px;
  text-align: center;
  margin:10px;
}
.searchBox{
  @include flex;
  height: 20px; line-height: 20px;
  margin:10px;
  background: white;
  border-radius: 4px;
  padding: 10px;
  input{
    @include flexcell;
    margin-left: 10px;
    height: 20px;
  }
}
</style>
